<template>
    <div>
        <van-sticky>
            <van-nav-bar title="图床列表" left-text="返回" left-arrow @click-left="onClickLeft" />
        </van-sticky>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-swipe-cell justify="space-between" v-for="item in imgList" :key="item.pictureNumber">
                    <img :src="item.pictureUrl" height="70%" width="70%">
                    <template #right>
                        <van-button square type="danger" text="删除" @click="onDel(item)" />
                    </template>
                </van-swipe-cell>
            </van-list>
        </van-pull-refresh>
        <div style="height:50px"></div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import axios from "axios";
export default {
    name: 'imgList',
    data() {
        return {
            userId: 0,
            findString: "",
            imgList: [],
            loading: false,
            finished: false,
            refreshing: false,
            // 一页多少条记录
            size: 10,
            // 当前页
            current: 1,
            // 总页数
            pages: 1,
            // 总数量
            total: 0

        }
    },
    //props: ['catchData'],    //接收父组件的方法
    props: {
        articleIs: String
    },
    mounted() {
        window.console.log(this.articleIs)

        //   window.console.log("你进入了正文页")
        //   window.console.log("参数为" + this.$route.query.id)
    },
    methods: {
        async onDel(item) {
            let res = await this.$http.delPicture({ id: item.pictureNumber })
            if (res !== undefined && res.meta.status == 200) {
                Toast("删除成功")
                //表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素
                this.imgList.splice(this.imgList.indexOf(item), 1);
            }
        },
        onClickLeft() {
            // Toast('返回');
            this.$router.go(-1);//返回上一层
        },
        async onLoad() {
            if (this.refreshing) {
                this.imgList = [];
                this.refreshing = false;
            }
            let data = this.userId + "/" + this.current + "/" + this.size
            let res = await this.$http.getPictureListByUser(data)

            this.pages = res.data.pages
            this.total = res.data.total
            // 加载状态结束
            for (let i = 0; i < res.data.records.length; i++) {
                res.data.records[i].pictureUrl = axios.defaults.baseURL + res.data.records[i].picturePath
                this.imgList.push(res.data.records[i])
            }
            this.loading = false;

            // 数据全部加载完成
            if (this.current >= this.pages) {
                this.finished = true;
            }
            this.current = res.data.current + 1
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;

            // 一页多少条记录
            this.size = 10
            // 当前页
            this.current = 1
            // 总页数
            this.pages = 1
            // 总数量
            this.total = 0

            this.onLoad();
        },
        onClick(item) {
            window.console.log(item)
            this.$router.push({
                path: this.redirect || '/article', query: {
                    id: item.articleNumber
                }
            })
        },
        getData(userId, findString) {
            if (userId != undefined)
                this.userId = userId
            else
                this.userId = 0
            if (findString != undefined)
                this.findString = findString
            else
                this.findString = ""

            //   this.articleList = []

            //       this.onRefresh();
        },
        getData2(findString) {
            this.findString = findString

            //        this.onRefresh();
        },

    },
    // 当页面进入时
    beforeRouteEnter(to, from, next) {
        //   window.console.log("你进入了正文页"); // undefined
        //    window.console.log(this); //undefined，不能用this来获取vue实例
        //  window.console.log('组件路由钩子：beforeRouteEnter');
        next(vm => {
            vm
            //    window.console.log(vm); //vm为vue的实例
            //    window.console.log("参数为" + vm.$route.query.id)
            vm.getData(vm.$route.query.id, vm.$route.query.findString)
            // else
            //     vm.getData(0)
            // if (vm.$route.query.findString != undefined)
            //     vm.getData2(vm.$route.query.findString)
            //    vm.getData2(vm.$route.query.findString)
            //    window.console.log('组件路由钩子beforeRouteEnter的next');
        });
    },
    // 当页面离开时
    // 这里思路是制作为用户阅读时间
    // beforeRouteLeave(to, from, next) {
    //     // 导航离开该组件的对应路由时调用
    //     // 可以访问组件实例 `this`
    //     // window.console.log(this, 'beforeRouteLeave'); //当前组件实例
    //     // window.console.log(to, '组件独享守卫beforeRouteLeave第一个参数');
    //     // window.console.log(from, '组件独享守卫beforeRouteLeave第二个参数');
    //     // window.console.log(next, '组件独享守卫beforeRouteLeave第三个参数');
    //     next();
    // }

}




</script>

<style >
</style>